<template>
  <div class="w-full h-full p-3 flex flex-col gap-2 bg-Center text-fontPrimary">
    <WindowTab :mini="false" :full="false" obj="child" fontColor="text-black">
      <p class="text-fontPlaceholde text-xs font-bold">通知</p>
    </WindowTab>

    <div class="w-full flex flex-row items-center gap-3">
      <n-avatar :src="RouteParams.avatar" />
      <div>
        <p class="text-base">{{ RouteParams.name }}</p>
        <p class="text-[12px]">
          正在邀请你进行{{ RouteParams.messageType === MessageType.videoCall ? " 视频通话" : "语音通话" }}...
        </p>
      </div>
    </div>
    <div class="w-full flex flex-row justify-end items-center">
      <el-button size="small" type="danger" @click="Reject">拒绝</el-button>
      <el-button size="small" type="success" @click="Agree">接受</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { useRoute } from "vue-router";
import { CallContentStatus, CallStatus, IOpenNotifyParams } from "@/types/call";
import { IMessage, MessageType, TacticMessageType } from "@/types/chat";
import { useUser } from "@/store/modules/user";
import { useMitt } from "@/hooks/useMitt";
import { MessageStrategyMap } from "@/tactics/message";
import { NAvatar } from "naive-ui";
import WindowTab from "@/components/WindowTab/index.vue";

const route = useRoute();
const user = useUser();
const RouteParams = computed<IOpenNotifyParams>(() => {
  if (!route.query.requestParams || typeof route.query.requestParams !== "string") return;
  return JSON.parse(route.query.requestParams);
});

// 同意
async function Agree() {
  let res = await BuildWindow();
  if (res)
    setTimeout(() => {
      SendCallMessage(CallStatus.agree);
    }, 1000);
}

// 拒绝
function Reject() {
  SendCallMessage(CallStatus.reject);
}

// 发送消息
function SendCallMessage(callStatus: CallStatus) {
  const { chatType, sessionId, messageType, id } = RouteParams.value;
  let content = JSON.stringify({
    type: callStatus === CallStatus.agree ? CallContentStatus.Join : "",
    content: "",
  });
  const strategy = MessageStrategyMap[messageType as TacticMessageType];
  let message = strategy.mergeData({
    sendId: user.userId!,
    toId: id,
    chatType,
    messageType,
    sessionId,
    callStatus,
    content,
  });

  strategy.sendMessage(message);
  window.electronApi.controlTabBar({
    obj: "notify",
    type: "close",
  });
}

// 构建窗口
async function BuildWindow() {
  const { chatType, messageType, sessionId, id, name, avatar } = RouteParams.value;
  let isVoice = messageType === MessageType.voiceCall;
  let title = isVoice ? "voiceCall" : "videoCall";
  const path =
    title +
    "?requestParams=" +
    encodeURIComponent(
      JSON.stringify({
        chatType,
        messageType,
        sessionId,
        isCall: true,
        initiatorId: id, //对方发起的通话
        callCandidateLists: [{ name, avatar, id }],
      }),
    );
  const size = isVoice ? { width: 350, height: 550 } : { width: 1000, height: 650 };
  const data = { path, title, ...size };
  return await window.electronApi.createWindow(data);
}

// 处理对方取消消息
function HandelRejectMessage(message: IMessage) {
  // 如果是 取消或者拒绝消息 才关闭notify
  if (message.callStatus === CallStatus.cancel) {
    window.electronApi.controlTabBar({
      obj: "notify",
      type: "close",
    });
  }
  // TODO:后续我们会检测是否在通话中 如果存在 发送消息 表示在忙线
}

useMitt.on("webrtc", HandelRejectMessage);
</script>

<style lang="scss" scoped></style>
